<%--

  @author yulezhisi
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>user_list</title>

    <link rel="shortcut icon" href="<c:url value="/images/favicon.ico"/>" type="image/x-icon"/>
    <script src="<c:url value="/js/jquery-1.9.1.min.js"/>"></script>
    <script src="<c:url value="/layui/layui.js"/>"></script>
    <link rel="stylesheet" type="text/css" href="<c:url value="/layui/css/layui.css"/>">

    <script src="<c:url value="/js/my/commons.js"/>"></script>

    <style>
        .container {
            width: 1200px;
            margin: 20px auto;
        }
    </style>

    <%--操作工具条  {{d.xx.xx}} 可以读取到请求返回json的所有属性 可以一直嵌套  --%>
    <script type="text/html" id="toolBar">
        {{# if(d.status!=0 && d.status!=-1){ }}
        <a class="layui-btn layui-btn-xs layui-layout-body  layui-layout-right" lay-event="edit" target="_self">...</a>
        {{# }  }}
        <a class="layui-btn layui-btn-xs layui-layout-body" lay-event="add" target="_self">添加</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script>
        <%--供表格值转换调用--%>

        function getRole(roleId) {
            switch (roleId) {
                case 1:
                    return '客户经理';
                case 2:
                    return '销售主管';
                case 3:
                    return '高管';
            }
        }

        //表格渲染
        layui.use(['table', 'form'], function () {
            var table = layui.table;
            table.render({
                elem: '#tableId'
                , url: '<c:url value="/user/list.do"/>'
                , toolbar: '#toolbarDemo'
                , cols: [[
                    {type: "numbers", title: '序号', width: 50}
                    , {field: 'account', width: 100, title: '账户'}
                    , {field: 'realName', width: 150, title: '姓名'}
                    , {field: 'email', width: 150, title: '邮箱'}
                    , {field: 'createTime', width: 200, title: '创建时间'}
                    , {field: 'lastLoginTime', width: 200, title: '最后一次登录时间'}
                    //, {field: 'status', width: 150, title: '状态'}
                    , {field: 'roleId', templet: '<div>{{ getRole(d.roleId) }}</div>', width: 150, title: '角色'}
                    , {fixed: 'right', title: '操作', toolbar: '#toolBar', minWidth: 100}
                ]]
                , page: true
                , id: 'forReload'
            });

            //重载参数
            var $ = layui.$, active = {
                reload: function () {
                    let realName = $('#by_realName');
                    let role = $('#by_role');
                    //执行重载
                    table.reload('forReload', {
                        url: '${pageContext.request.contextPath}/user/list.do',
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            realName: realName.val()
                            , id: role.val()
                        }
                    });
                }
            };
            //触发重载
            $('.reloadTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            //监听工具条
            table.on('tool(table_layui_filter)', function (obj) { //注：tool是工具条事件名，table_layui_filter是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event;   //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象
                if (layEvent === 'add') { //添加
                    location = '${pageContext.request.contextPath}/view/user/register.jsp';
                } else if (layEvent === 'del') { //删除
                    layer.confirm('真的删除行么', function (index) {
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                        $.ajax({
                            url:
                                '${pageContext.request.contextPath}/user/delete/' + data.id +'.do',
                            type: 'DELETE',
                            success: function (data) {
                                if (data == 'success') {
                                    layer.msg('删除成功', {time: 1000});
                                }
                            }
                        })
                    });
                }
            });
        });
    </script>
</head>
<body>
<div class="container">
    <%--重载条件--%>
    <div class="layui-row layui-form reloadTable">
        <div class=" layui-col-md5">
            名称：
            <div class="layui-inline">
                <input class="layui-input" name="realName" id="by_realName" autocomplete="off">
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>
        <div class="demoTable layui-col-md5">
            角色：
            <div class="layui-inline">
                <select name="role" id="by_role">
                    <option value="">全部</option>
                    <option value="1">客户经理</option>
                    <option value="2">销售主管</option>
                    <option value="3">高管</option>
                </select>
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>
    </div>

    <%--表格--%>
    <table class="layui-hide" id="tableId" lay-filter="table_layui_filter"></table>

</div>
</body>
</html>
